<template>
  <!DOCTYPE html>
  <htm lang="en">
  <head>
    <meta charset="UTF-8">
    <title>论坛主页</title>
    <link rel="stylesheet" href="../assets/ciyuan_css/luntan_css/naviddation bar.css">
    <link rel="stylesheet" href="../assets/ciyuan_css/luntan_css/common.css">
    <link rel="stylesheet" href="../assets/ciyuan_css/luntan_css/list.css">
  </head>
  <body>

  <div class="daohanlan">
    <div class="left-logo">
      <div class="logo"><img src="../assets/ciyuan_image/luntan_img/xitontubiao.png" width="45"></div>
      <p>论坛管理中心</p>
    </div>
    <!DOCTYPE html>
    <html>
    <head>
      <title>搜索框</title>
      <style>
        .search-box {
          display: inline-block;
          position: absolute;
          top: 10px;
          right: 600px;
          width: 400px;
        }

        .search-box input[type="text"] {
          width: 100%;
          padding: 10px;
          border: none;
          border-radius: 20px;
          background-color: #f2f2f2;
          box-shadow: none;
          transition: box-shadow 0.3s ease;
        }

        .search-box input[type="text"]:focus {
          box-shadow: 0 0 5px #04ff00;
        }

        .search-box button {
          position: absolute;
          top: 0;
          right: 0;
          padding: 10px 20px;
          border: none;
          background-color: #007bff;
          color: #fff;
          border-radius: 20px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .search-box button:hover {
          background-color: #0056b3;
        }
      </style>
      <script>
        function search() {
          var input = document.getElementById("search-input");
          var keyword = input.value;
          // 在这里添加搜索功能的代码
          // ...
          alert("搜索关键字：" + keyword);
        }
      </script>
    </head>
    <body>
    <div class="search-box">
      <input type="text" id="search-input" placeholder="请输入关键字">
      <button onclick="search()">搜索</button>
    </div>
    </body>
    </html>

    <div class="zhanwe"></div>

    <div class="right-function">
      <!DOCTYPE html>
      <html>
      <head>
        <title>写帖子</title>
        <style>
          .button {
            display: inline-block;
            background-color: #0055ff;
            color: #0aee47;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
            transition: background-color 0.3s ease;
          }

          .button:hover {
            background-color: #0056b3;
          }
        </style>
      </head>
      <body>
      <a href="list.html" class="button">主页</a>
      </body>
      </html>
      <!DOCTYPE html>
      <html>
      <head>
        <title>写帖子</title>
        <style>
          .button {
            display: inline-block;
            background-color: #0055ff;
            color: #0aee47;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
            transition: background-color 0.3s ease;
          }

          .button:hover {
            background-color: #0056b3;
          }
        </style>
      </head>
      <body>
      <router-link to="/luntanpublish" class="button">写帖子</router-link>
      </body>
      </html>
    </div>
  </div>

  <div class="zhuti">
    <div class="gerzonxin">
      <div class="toxian">
        <img src="../assets/ciyuan_image/luntan_img/toxian.png" alt="" width="120">
      </div>
      <p>次元蜗</p>
      <div>男</div>
      <div></div>

      <div class="denjixinxi">
        <div>
          <div>积分</div>
          <div>10</div>
        </div>
        <div>
          <div>等级</div>
          <div>1</div>
        </div>
      </div>

    </div>

    <div class="bankuaixinxi">
      <ol>
        <li>
          <div class="bankuaixinxi">
            <h3 class="bankuaiminchen">帖1</h3>
            <div class="banzhu">版主: <span class="banzhuminchen">次元蜗</span></div>
            <p class="bankuaishuomin">今天加入次元蜗啦！</p>
            <img src="../assets/ciyuan_image/luntan_img/tupian.png" alt="tupian"  width="200" />

            <div class="chakanxianqin">
              <router-link to='/luntanreplies' target="_blank">查看详情>></router-link>
            </div>

            <div class="dianji">
              <div class="shulian">

                <button id="likeButton">点赞</button>
                <div id="likeCount">100</div>

              </div>
              <div>点击次数</div>
              <div>100</div>
            </div>
            <div>

            </div>
          </div>
        </li>
      </ol>
    </div>
    <li>
      <div class="bankuaixinxi">
        <h3 class="bankuaiminchen">帖2</h3>
        <div class="banzhu">版主: <span class="banzhuminchen">次元蜗</span></div>
        <p class="bankuaishuomin">开心</p>
        <img src="../assets/ciyuan_image/luntan_img/tupian.png" alt="tupian"  width="200">

        <div class="chakanxianqin">
          <router-link to='/luntanreplies' target="_blank">查看详情>></router-link>
        </div>

        <div class="dianji">
          <div class="shulian">
            <button id="likeButton">点赞</button>
            <div id="likeCount">3</div>
          </div>
          <div>点击次数</div>
          <div>100</div>
        </div>
        </div>
    </li>
    <li>
      <div class="bankuaixinxi">
        <h3 class="bankuaiminchen">帖</h3>
        <div class="banzhu">版主: <span class="banzhuminchen">次元蜗</span></div>
        <p class="bankuaishuomin">很开心</p>
        <img src="../assets/ciyuan_image/luntan_img/tupian.png" alt="tupian"  width="200">

        <div class="chakanxianqin">
          <router-link to='/luntanreplies' target="_blank">查看详情>></router-link>
        </div>

        <div class="dianji">
          <div class="shulian">

            <button id="likeButton">点赞</button>
            <div id="likeCount">0</div>

          </div>
          <div>点击次数</div>
          <div>2</div>
        </div>
        <div>
        </div>
      </div>
    </li>
  </div>

</body>
  </htm>
</template>

<script>
export default {
  name:'LuntanMaid'
}
</script>